<template>
    <!-- 分页组件 -->
    <div class="pagination">

        <el-pagination style="justify-content: flex-end; margin-top: 30px" v-model:current-page="currentPage"
          v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]" :background="true"
            layout="jumper, sizes, prev, pager, next, total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { ref, watch, watchEffect, defineEmits } from "vue";

// 接收父组件传入的值
const props = defineProps({
    page: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    total: {
        type: Number,
        required: true,
    },
});

// 当前页码和每页条数
const currentPage = ref(props.page);
const pageSize = ref(props.pageSize);

// 监听外部page变化
watch(() => props.page, (newPage) => {
    currentPage.value = newPage;
});

// 监听外部pageSize变化
watch(() => props.pageSize, (newSize) => {
    pageSize.value = newSize;
});

// 发送事件给父组件
const emit = defineEmits(["update:page", "update:pageSize"]);

// 更新每页条数
const handleSizeChange = (val) => {
    pageSize.value = val;
    emit("pageSize", val);
};

// 更新当前页码
const handleCurrentChange = (val) => {
    currentPage.value = val;
    emit("getPage", val);
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination__total {
    color: #000;
}


.is-active {
    background-color: #000 !important;
}


::v-deep .el-pagination__jump {
    color: #000;
}

::v-deep .el-input__inner {
    color: #000;
}

::v-deep .el-select__placeholder {
    color: #000;
}

::v-deep .el-pager li {
    color: #000;
}

::v-deep .el-pagination button {
    color: #000;
}
</style>
